<!-- 账号-密码登录 -->
<script lang="ts" setup>
  import { loginApi } from '@/api/user'
  import { ILoginParams } from '@/types/user'
  import { ref } from 'vue'

  const form = ref<ILoginParams>({
    account: '',
    password: '',
  })
  const formRef = ref<UniHelper.UniFormsInstance>()
  const rules: UniHelper.UniFormsRules = {
    account: {
      rules: [
        { required: true, errorMessage: '请输入手机号' },
        { pattern: /^1\d{10}$/, errorMessage: '请输入正确的手机号' },
      ],
    },
    password: {
      rules: [
        { required: true, errorMessage: '请输入密码' },
        { pattern: /^1\w{6}$/, errorMessage: '密码长度为6位' },
      ],
    },
  }

  const onSubmit = async () => {
    await formRef.value?.validate!()
    const res = await loginApi(form.value)
    console.log('res  ----->  ', res)
  }
</script>

<template>
  <view>
    <uni-forms :model="form" ref="formRef" :rules="rules">
      <uni-forms-item name="account">
        <uni-easyinput
          :input-border="false"
          v-model="form.account"
          type="text"
          placeholder="请输入账号"
          trim
        />
      </uni-forms-item>
      <uni-forms-item name="password">
        <uni-easyinput
          :input-border="false"
          v-model="form.password"
          type="password"
          placeholder="请输入密码"
          clearable
          trim
        />
      </uni-forms-item>
      <button @click="onSubmit" class="uni_button">登录</button>
    </uni-forms>
  </view>
</template>

<style lang="scss" scoped>
  @import '@/uni.scss';
  .uni-forms-item {
    border-bottom: 1px solid $uni-text-color-custom;
  }
</style>
